<template>
  <div>
    <!-- <p class="zrjk__top" v-if="cuCurGroup === '质检组' || cuPower === 1">
      <el-button v-for="item in kfGroup.options" :key="item.value" :class="kfGroup.value === item.value ?'active' : ''" @click="handleChangeGroup(item.value)" v-text="item.label">
      </el-button>
    </p> -->
    <div class="middle">
      <template v-if="cuCurGroup === '质检组' || cuPower === 1">
        <el-row class="row" >
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">通话类型：</span>
            <el-select v-model="callType.value" style="width:55%;" clearable placeholder="通话类型" @change="handleCurrentChange(1)">
              <el-option v-for="item in callType.options" :key="item.id" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">问题类型：</span>
            <el-select v-model="problemType.value" style="width:55%;" clearable placeholder="问题类型" @change="handleCurrentChange(1)">
              <el-option v-for="(item,index) in problemType.options" :key="index" :label="item.name" :value="item.name">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">处理情况：</span>
            <el-select v-model="sitution.value" style="width:55%;" clearable placeholder="处理情况" @change="handleCurrentChange(1)">
              <el-option v-for="(item,index) in sitution.options" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
           <el-col :span="6" >
            <span style="width:28%;text-align:right;float:left;line-height:36px;">分组类型：</span>
            <el-select v-model="fzleixing.value" style="width:55%;" clearable placeholder="分组类型" @change="handleCurrentChange(1)">
              <el-option v-for="(item,index) in fzleixing.options" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="6" v-if="0">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">满意度：</span>
            <el-select v-model="myd.value" clearable placeholder="满意度" @change="handleCurrentChange(1)">
              <el-option v-for="(item,index) in myd.options" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6" >
            <span style="width:28%;text-align:right;float:left;line-height:36px;">服务客服：</span>
            <el-select v-model="kfs.value" style="width:55%;" clearable placeholder="服务客服" @change="handleCurrentChange(1)">
              <el-option v-for="(item,index) in kfs.options" :key="index" :label="item.UserName" :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">电话号码：</span>
            <!-- style="width:80px;" -->
            <el-input v-model="phone" placeholder="请输入电话号码" style="width:55%;" @keyup.enter.native="handleCurrentChange(1)"></el-input>
          </el-col>
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">通话时长：</span>
            <el-input v-model="callDur.st" placeholder="" style="width:27%;" @keyup.enter.native="handleCurrentChange(1)"></el-input>
            -
            <el-input v-model="callDur.et" placeholder="" style="width:26%;" @keyup.enter.native="handleCurrentChange(1)"></el-input>
            秒
          </el-col>
          <el-col :span="6" v-if="cuCurGroup === '质检组'">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">评分状态：</span>
            <el-select v-model="gradeState.value" style="width:55%;" clearable placeholder="服务客服" @change="handleCurrentChange(1)">
              <el-option v-for="(item,index) in gradeState.options" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">日期范围：</span>
            <el-date-picker v-model="dateDur"  style="width:55%;" type="daterange" placeholder="选择日期范围" @change="handleCurrentChange(1)">
            </el-date-picker>
          </el-col>
          
        </el-row>
        <el-row class="row">
          <el-col :span="5">
              <el-button type="primary" @click="this.zjSearch" style="width:25%;">搜索</el-button>
              <el-button @click="this.zjReset" style="width:25%;">重置</el-button>
            </el-col>
        </el-row>
      </template>
      <template v-if="cuCurGroup !== '质检组' && cuPower !== 1">
        <el-row class="row">
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">通话类型：</span>
            <el-select v-model="callType.value" style="width:55%;" clearable placeholder="通话类型" @change="handleCurrentChange(1)">
              <el-option v-for="item in callType.options" :key="item.id" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">问题类型：</span>
            <el-select v-model="problemType.value" style="width:55%;" clearable placeholder="问题类型" @change="handleCurrentChange(1)">
              <el-option v-for="(item,index) in problemType.options" :key="index" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">处理情况：</span>
            <el-select v-model="sitution.value" clearable  style="width:55%;" placeholder="处理情况" @change="handleCurrentChange(1)">
              <el-option v-for="(item,index) in sitution.options" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6" v-if="0">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">满意度：</span>
            <el-select v-model="myd.value" clearable placeholder="满意度" style="width:55%;" @change="handleCurrentChange(1)">
              <el-option v-for="(item,index) in myd.options" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">电话号码：</span>
            <!-- style="width:80px;" -->
            <el-input v-model="phone" placeholder="请输入电话号码" style="width:55%;" @keyup.enter.native="handleCurrentChange(1)"></el-input>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">通话时长：</span>
            <el-input v-model="callDur.st" placeholder="" style="width:27%;" @keyup.enter.native="handleCurrentChange(1)"></el-input>
            -
            <el-input v-model="callDur.et" placeholder="" style="width:26%;" @keyup.enter.native="handleCurrentChange(1)"></el-input>
            秒
          </el-col>
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">日期范围：</span>
            <el-date-picker v-model="dateDur" style="width:55%;" type="daterange" placeholder="选择日期范围" @change="handleCurrentChange(1)">
            </el-date-picker>
          </el-col>
        </el-row>
        
      </template>
      
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="cU_ser" label="用户名" align="center" min-width="100">
         <template slot-scope="scope">
           <div :class="$style.click" @click="scope.row.cU_ser?$router.push({ path: `/vip-manage/detail/${scope.row.userId}/jbxx` }):''">
              <span>{{scope.row.cU_ser}}</span><br>
              <span :class="$style.red">({{scope.row.cMtel}})</span>
           </div>
        </template>
      </el-table-column>
      <el-table-column label="评分" align="center" min-width="70">
        <template slot-scope="scope">
          <span @click="openGradeDialog(scope.row.ipccId,scope.row.zf)">
              <!-- v-if="scope.row.zf === undefined || scope.row.zf === ''" -->
            <span
              :class="$style.click"
              >{{scope.row.zf === undefined ? '未评价' : scope.row.zf}}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" align="center" prop="kfgroup" label="客服组">
      </el-table-column>
      <el-table-column min-width="100" align="center" prop="kfname" label="服务客服">
      </el-table-column>
      <!-- <el-table-column min-width="100" prop="id" align="center" label="受理单号">
      </el-table-column> -->
      <el-table-column min-width="100" prop="yiji" align="center" label="问题类型">
      </el-table-column>
      <el-table-column min-width="120" prop="thlx" align="center" label="通话类型">
      </el-table-column>
      <el-table-column min-width="100" align="center" label="通话内容">
        <template slot-scope="scope">
          <span :class="$style.click" @click="dialog(scope.$index)">点击查看</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" prop='state' align="center" label="处理情况">
      </el-table-column>
      <el-table-column min-width="150" prop="ttpsj" align="center" label="时间">
      </el-table-column>
      <el-table-column min-width="100" prop="thsj" align="center" label="通话时长">
      </el-table-column>
      <!-- <el-table-column min-width="100" prop="fstate" align="center" label="排队状态">
        <template slot-scope="scope">
          <span>{{ scope.row.fstate == 1 ? '成功' : '失败' }}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column min-width="150" prop="pdhs" align="center" label="排队耗时">
      </el-table-column> -->
      <el-table-column min-width="100" prop="xlsj" align="center" label="响铃时间">
        <template slot-scope="scope">
          {{scope.row.xlsj || 0}}s
        </template>
      </el-table-column>
      <!-- <el-table-column min-width="150" prop="myd" align="center" label="满意度">
        <template slot-scope="scope">
          <span>{{ scope.row.myd == 0 ? '未按键' : scope.row.myd == 1 ? '非常满意' : scope.row.myd == 2 ? '基本满意' : scope.row.myd == 3 ? '不满意' : '未进行满意度调查' }}</span>
        </template>
      </el-table-column> -->
      <el-table-column min-width="130" align="center" label="通话录音">
        <template slot-scope="scope">
          <div v-if="scope.row.recordfile">
           <a 
              :href="scope.row.deviceType===0?('http://wznb.wsloan.com:8888/telrecord/main/listentovoice?date=/media/sda/voice/'+ (scope.row.recordfile ? scope.row.recordfile.slice(0, 8) :'' )+ '/'+(scope.row.recordfile? scope.row.recordfile.replace('_9', '_') : '') +'.wav'): ('http://report.wsloan.com:8888/record/'+scope.row.recordfile)"
               target="_blank" 
              :class="$style.click">播放</a>
                <a :href="'http://122.228.132.78:1980/main/download?path=/media/sda/voice/'+(scope.row.recordfile? scope.row.recordfile.slice(0, 8) :'')  + '/'+(scope.row.recordfile? scope.row.recordfile.replace('_9', '_') : '')+'.wav'" :class="$style.click" v-if="scope.row.recordfile">下载</a>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 30px 0;">
      <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :current-page="page" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="通话内容" :visible.sync="isVisible.remark">
      {{remarkContent}}
    </el-dialog>
    <el-dialog :visible.sync="isVisible.grade" class="gradeDialog kxz-zjList__gradeDialog">
      <div>
        <table>
          <tr>
            <th
              v-for="(item,index) in gradeTable.titles"
              :key="index"
              :class="index | fltClassByIndex"
              v-text="item.text"
              >
            </th>
          </tr>
        </table>
        <table v-for="(tb,tIndex) in gradeTable.curContent" :key="tIndex">
          <template v-for="(rGroup,rgIndex) in tb.subTitles" v-if="tb.type !== 'reset'">
            <tr v-for="(row,rIndex) in rGroup.children" :key="rIndex">
              <template v-if="rgIndex === 0 && rIndex === 0">
                <td :rowspan="tb.subTitles | fltStAllLen" class="gTdA">{{tb.id}}</td>
                <td :rowspan="tb.subTitles | fltStAllLen" class="gTdB">{{tb.title}}</td>
              </template>
              <td v-if="rIndex === 0" :rowspan="rGroup.children.length" class="gTdC">
                {{rGroup.title}}
              </td>
              <td v-text="row.good" class="gTdD"></td>
              <td v-text="row.bad" class="gTdE"></td>
              <td class="gTdF">
                <span class="gv">-{{row.grade.value}}</span>
                <el-checkbox
                  v-model="row.grade.ischecked"
                  :disabled="(cuCurGroup === '质检组' && gradeTable.isGrade ) || (cuCurGroup !== '质检组' && cuPower === 1)? false : true"
                  @change="checkChange(`${tIndex},${rgIndex},${rIndex}`,row.grade.ischecked)"
                  >
                </el-checkbox>
              </td>
            </tr>
          </template>
          <tr v-if="tb.type === 'reset'">
            <td class="gTdA" v-text="tb.id"></td>
            <td class="gTdB reset">
              <span v-text="tb.title"></span>
            </td>
            <td class="gTdC"></td>
            <!-- <td class="gTdBC" v-text="tb.title"></td> -->
            <td class="gTdD" v-text="tb.content.good"></td>
            <td class="gTdE" v-text="tb.content.bad"></td>
            <td class="gTdF">
              <span class="gv">-{{tb.content.grade.value}}</span>
              <el-checkbox
              v-model="tb.content.grade.ischecked"
              :disabled="(cuCurGroup === '质检组' && gradeTable.isGrade ) || (cuCurGroup !== '质检组' && cuPower === 1)? false : true"
              @change="checkChange(tIndex,tb.content.grade.ischecked)"
              >
              </el-checkbox>
            </td>
          </tr>
        </table>
        <div class="total">
          <span class="gTdABCDE">
            最终得分：<input type="text" :value="gradeTable.total" readonly><span class="unit">分</span>
          </span><span class="gTdF"> </span>
        </div>
        <el-input
          type="textarea"
          class="textarea"
          placeholder="请输入内容"
          :row="3"
          :readonly="(cuCurGroup === '质检组' && gradeTable.isGrade ) || (cuCurGroup !== '质检组' && cuPower === 1) ? false : true"
          v-if="(cuCurGroup === '质检组' && gradeTable.isGrade ) || (cuCurGroup !== '质检组' && cuPower === 1)? true : (gradeTable.textarea) ? true : false"
          v-model="gradeTable.textarea">
        </el-input>
        <div style="text-align:center;margin: 30px 0" v-if="(cuCurGroup === '质检组' && gradeTable.isGrade ) || (cuCurGroup !== '质检组' && cuPower === 1)">
          <el-button type="primary" @click="handleSubmitGrade">提交</el-button>
          <el-button @click="handleCancelGrade">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dateFormat } from 'vux'

export default {
  name: 'zj-list',
  data() {
    const nowDate = new Date()
    const ztDate = nowDate.setDate(nowDate.getDate() - 1)
    const timeDur = [ztDate,ztDate]
    return {
      kfGroup: {
        value: 104,
        options: [
          { label: '业务组', value: 104 },
          { label: '答疑组', value: 100 },
          { label: '回访组', value: 112 },
        ]
      },
      // 表格数据及配置数据
      tableData: [],
      pageSize: 10,
      page: 1,
      total: 0,
      //
      //
      isVisible: {
        remark: false,
        grade:false,
      },
      //
      dateDur: timeDur,
      phone:'',
      callType: {
        value: '',
        options: [
          {
            label: '呼入',
            value: 'ring'
          }, {
            label: '转接',
            value: 'transfer'
          }, {
            label: '呼出',
            value: '1'
          }, {
            label: '回访',
            value: 'huifan'
          }, {
            label: '未接听',
            value: 'noanswer'
          }
        ]
      },
      problemType: {
        value: '',
        options: [
        ]
      },
      sitution: {
        value: '',
        options: [
          { label: '完成', value: '完成' },
          { label: '转工单', value: '转工单' },
        ]
      },
      fzleixing:{
        value: '',
        options: [
          { label: '业务组', value: '104' },
          { label: '答疑组', value: '100' },
          { label: '回访组', value: '112' }
        ]
      },
      myd: {
        value: '',
        options: [
          { label: '满意', value: '满意' },
          { label: '基本满意', value: '基本满意' },
          { label: '不满意', value: '不满意' },
          { label: '未评价', value: '未评价' },
        ]
      },
      kfs: {
        value: '',
        options: [
        ]
      },
      callDur: {
        st: '',
        et: '',
      },
      gradeState: {
        value: '',
        options: [
          { label: '未评分', value: 0 },
          { label: '已评分', value: 1 },
        ]
      },
      // 弹窗部分
      remarkContent:'',
      // 评分
      gradeTable:{
        callId:'',
        isGrade:true,
        total:100,
        textarea:'',
        curContent:[],
        titles:[
          {text:'序号',width:3},
          {text:'分部',width:7},
          {text:'分项',width:10},
          {text:'标准示例',width:35},
          {text:'扣分示例',width:35},
          {text:'分值',width:10}
        ],
        dy:[
          {
            id:1,
            title:'服务态度类',
            subTitles:[
              {
                title:'服务用语',
                children:[
                  {
                    good:'（1）正确使用开头语/结束语：您好，这里是鄯善温商贷，我是客服***，请问有什么可以帮您/结束语：感谢您的咨询，祝您生活愉快，再见',
                    bad:'未正确使用开头语：您好，这里是鄯善温商贷，我是客服***，请问有什么可以帮您。-10分未正确使用结束语：感谢您的咨询，祝您生活愉快，再见。-10分',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）无任何口语化表达，例如：出现“喂”，“好吧”，“额”等口语',
                    bad:'出现一次类似口语 -5分/此，上限 -10分',
                    grade:{
                      value:5,
                      ischecked:false
                    }
                  },
                  {
                    good:'（3）在帮助客户查询等情况时，需告知客户稍等。查询完毕告知前后需感谢',
                    bad:'未使用请稍等/感谢您的耐心等待  -5分/次，上限-10分',
                    grade:{
                      value:5,
                      ischecked:false
                    }
                  },
                  {
                    good:'（4）礼貌用语',
                    bad:'客户表达感谢时未回应“不客气”/提问客户时未使用“请问” -5分/次，上限-10分',
                    grade:{
                      value:5,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'服务耐心及适时响应',
                children:[
                  {
                    good:'（1）组员主动倾听客户的问题，在倾听过程中适时回应或附和客户',
                    bad:'客户问题较长，客服未有作出任何反应',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）不随意打断客户说话',
                    bad:'在客户陈述问题或者表达意见/建议时，打断客户说话',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（3）客户咨询过程中，服务主动',
                    bad:'客户咨询过程中，服务被动，推诿问题',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（4）态度积极',
                    bad:'态度冰冷、漠不关心、声音懒散、有气无力、不耐烦',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'语音语速',
                children:[
                  {
                    good:'（1）语速平稳，能匹配客户情况及时调整语速及语量，客户完全能够听清',
                    bad:'口齿不清晰，语速过快，导致客户听不清',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）通话节奏掌握良好',
                    bad:'表达不流畅，条理不清晰（啰嗦），出现卡壳（两次以上）',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（3）音量大小适中，能够匹配客户的情况加以调整',
                    bad:'在客户提出听不清时（两次以上），仍未调整音量',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                ]
              },
            ]
          },
          {
            id:2,
            title:'服务准确性',
            subTitles:[
              {
                title:'业务指导及提交解决方案',
                children:[
                  {
                    good:'（1）在短时间内能够给予正确的业务提示或指导方案',
                    bad:'业务知识不熟练，不能很快回答客户问题，无辜拖长对话',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）完整回复问题',
                    bad:'回答不完整，误导客户（例投资需要勾选现金券，正确：手动投资需要勾选现金券）',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                  {
                    good:'（3）不存在影响客户交易或引起投诉等后续风险',
                    bad:'错误回答未纠正 -50分',
                    grade:{
                      value:50,
                      ischecked:false
                    }
                  },
                  {
                    good:'（4）能够根据客户情况，为客户提供合理替代方案，解决客户问题',
                    bad:'',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'服务规范性',
                children:[
                  {
                    good:'（1）核对本人信息告知账户信息，审核问题至少两个',
                    bad:'未核对本人信息（姓名、用户名、身份证后四位，银行卡后四位）告知账户信息',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）答疑客服能够按照操作规范进行电话转接操作',
                    bad:'未进行转接或者回电',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                  {
                    good:'（3）未向第三方泄漏客户信息，如第三方来电审核通过已告知相关信息（除外）但后续通话中透露非本人需要停止告知客户本人信息',
                    bad:'向他们泄露客户信息',
                    grade:{
                      value:30,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'业务操作流程',
                children:[
                  {
                    good:'（1）服务过程中均能按照规范操作流程执行',
                    bad:'工单录入及备注录入未符合录入准确性要求，且对工单的结果未及时跟踪',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）在客户第一通电话中解决的问题或第一时间为其受理，避免客户重复来电',
                    bad:'未在承诺时间内回复客户',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                  {
                    good:'（3）对尚未有明确流程规范的情况处理谨慎，未有业务风险或给客户带来不便',
                    bad:'给客户平台通知以外的保证',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                ]
              },
            ]
          },
          {
            id:3,
            title:'服务效率',
            subTitles:[
              {
                title:'倾听理解判断',
                children:[
                  {
                    good:'（1）客户第一次描述完后即能从客户含糊的、不专业的表达中了解客户需求',
                    bad:'不理解客户意思',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）能准确理解答疑手册内容，不会出现答非所问的情况',
                    bad:'答非所问（回答是正确的，但和客户的问题无关）主动纠正-10分/未主动纠正-30分',
                    grade:{
                      value:30,
                      ischecked:false
                    }
                  },
                  {
                    good:'（3）在客户不理解时，用较为通俗易懂的方式给客户解释',
                    bad:'',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'沟通',
                children:[
                  {
                    good:'（1）在客户对来电意图描述不清时，座席的提问也能与客户需求有高相关度，可通过一次提问达成需多次提问才能达成的效果',
                    bad:'过多重复客户提问（两次以上）',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）能化解客户的不满，有效安抚客户，态度诚恳，化解投诉',
                    bad:'客户通话中因各种原因表现出投诉倾向/不满/着急/情绪激动时，未主动道歉安抚',
                    grade:{
                      value:30,
                      ischecked:false
                    }
                  },
                  {
                    good:'（3）对于业务上无法实现的情况能合理向客户解释、委婉拒绝',
                    bad:'反问客户、质疑，以不恰当方式指出客户错误、拒绝客户',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'系统操作熟悉程度',
                children:[
                  {
                    good:'（1）系统操作熟练、正确，避免等待时间过长',
                    bad:'让客户等待超过30秒（30秒内没有回应客户）',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                ]
              },
            ]
          },
          {
            id:4,
            type:'reset',   // 标记清零项
            title:'清零项',
            content:{
              good: '电话中出现挂断客户电话/在电话中与客户发生争执/电话中有抱怨、辱骂、指责、讽刺、挑衅客户的情况',
              bad: '未解决客户问题，非特殊情况下，主动挂断客户电话',
              grade: {
                value:100,
                ischecked:false
              }
            },
          },
        ],
        yw:[
          {
            id:1,
            title:'服务态度类',
            subTitles:[
              {
                title:'服务用语',
                children:[
                  {
                    good:'（1）自报家门：您好，这里是鄯善温商贷，我是客服***/结束语：祝您生活愉快，再见',
                    bad:'未正确自报家门 -10分/未正确使用结束语：祝您生活愉快，再见。-10分',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）身份确认：请问您是**先生/女士吗？',
                    bad:'未身份确认',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（3）礼貌用语',
                    bad:'客户表达感谢时未回应“不客气”',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'服务耐心及适时响应',
                children:[
                  {
                    good:'（1）不随意打断客户说话  ',
                    bad:'在客户陈述问题或者表达意见/建议时，打断客户说话',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）去电过程中，服务主动  ',
                    bad:'去电过程中，服务被动，无视客户提问，推诿问题',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（3）态度积极',
                    bad:'态度冰冷、漠不关心、声音懒散、有气无力、不耐烦',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'语音语速',
                children:[
                  {
                    good:'（1）语速平稳，能配合客户情况及时调整语速及语量，客户完全能够听清',
                    bad:'口齿不清晰，语速过快，导致客户听不清',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）通话节奏掌握良好',
                    bad:'表达不流畅、条理不清晰（罗嗦），出现卡壳（两次以上）',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                ]
              },
            ]
          },
          {
            id:2,
            title:'业务准确性',
            subTitles:[
              {
                title:'业务指导',
                children:[
                  {
                    good:'（1）不存在影响客户交易或引起投诉等后续风险',
                    bad:'错误介绍未纠正-50分',
                    grade:{
                      value:50,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）能够根据客户情况，为客户提供合理替代方案，解决客户问题',
                    bad:'',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                  {
                    good:'（3）在短时间内能够给予正确的业务提示或指导方案',
                    bad:'业务知识不熟练，不能很快回答客户问题，无故拖长对话',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'适度营销',
                children:[
                  {
                    good:'（1）主动挽留客户，并进行异议处理',
                    bad:'客户不方便时，未挽留客户并改约时间',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'提醒服务',
                children:[
                  {
                    good:'（1）红包、现金券、加息券、活动等（金额、有效期、使用方法、查看地点）',
                    bad:'未详细介绍/提醒',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'业务操作流程',
                children:[
                  {
                    good:'（1）服务过程中均能按照规范操作流程执行',
                    bad:'工单录入及备注录入未符合录入准确性要求，且对工单的结果未及时跟踪',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）对尚未有明确流程规范的情况处理谨慎，未有业务风险或给客户带来不便',
                    bad:'给客户平台通知以外的保证',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                ]
              },
            ]
          },
          {
            id:3,
            title:'服务效率',
            subTitles:[
              {
                title:'倾听理解判断',
                children:[
                  {
                    good:'（1）在客户不理解时，用较为通俗易懂的方式给客户解释',
                    bad:'',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                ]
              },
            ]
          },
          {
            id:4,
            type:'reset',   // 标记清零项
            title:'清零项',
            content:{
              good: '电话中出现挂断客户电话/在电话中与客户发生争执/电话中有抱怨、辱骂、指责、讽刺、挑衅客户的情况',
              bad: '未解决客户问题，非特殊情况下，主动挂断客户电话',
              grade: {
                value:100,
                ischecked:false
              }
            },
          },
        ],
        hf:[
          {
            id:1,
            title:'服务态度类',
            subTitles:[
              {
                title:'服务用语',
                children:[
                  {
                    good:'（1）自报家门：您好，这里是鄯善温商贷，我是客服***/结束语：祝您生活愉快，再见',
                    bad:'未正确自报家门 -10分/未正确使用结束语：祝您生活愉快，再见。-10分',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）身份确认：请问您是**先生/女士吗？',
                    bad:'未身份确认',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（3）在帮助客户客户查询等情况时，需告知客户稍等。查询完毕告知前后需感谢',
                    bad:'未使用请稍等  -5分',
                    grade:{
                      value:5,
                      ischecked:false
                    }
                  },
                  {
                    good:'（4）礼貌用语',
                    bad:'客户表达感谢时未回应“不客气”/提问客户时未使用“请问”-5分/次，上限-10分',
                    grade:{
                      value:5,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'服务耐心及适时响应',
                children:[
                  {
                    good:'（1）不随意打断客户说话  ',
                    bad:'在客户陈述问题或者表达合理意见/建议时，打断客户说话',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）去电过程中，服务主动  ',
                    bad:'去电过程中，服务被动，无视客户提问，推诿问题',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（3）态度积极',
                    bad:'态度冰冷、漠不关心、声音懒散、有气无力、不耐烦',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'语音语速',
                children:[
                  {
                    good:'（1）语速平稳，能配合客户情况及时调整语速及语量，客户完全能够听清',
                    bad:'口齿不清晰，语速过快，导致客户听不清',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）通话节奏掌握良好',
                    bad:'表达不流畅，条理不清晰（啰嗦），出现卡壳（两次以上）',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（3）音量大小适中，能够匹配客户的情况加以调整',
                    bad:'在客户提出听不清时（两次以上），仍未调整音量',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                ]
              },
            ]
          },
          {
            id:2,
            title:'业务准确性',
            subTitles:[
              {
                title:'业务指导',
                children:[
                  {
                    good:'（1）不存在影响客户交易或引起投诉等后续风险',
                    bad:'错误回答或介绍未纠正-50分',
                    grade:{
                      value:50,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）能够根据客户情况，为客户提供合理替代方案，解决客户问题',
                    bad:'',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                  {
                    good:'（3）在短时间内能够给予正确的业务提示或指导方案',
                    bad:'业务知识不熟练，不能很快回答客户问题，无故拖长对话',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'适度营销',
                children:[
                  {
                    good:'（1）主动挽留客户，并进行异议处理',
                    bad:'客户不方便时，未挽留客户并改约时间',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'服务规范性',
                children:[
                  {
                    good:'（1）核对本人信息告知账户信息，审核问题至少两个',
                    bad:'去电非本人接听时，需核对本账户信息（姓名、用户名、身份证后四位、银行卡后四位）告知账户信息',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'提醒服务',
                children:[
                  {
                    good:'（1）红包、现金券、加息券、活动等（金额、有效期、使用方法、查看地点）',
                    bad:'未详细介绍/提醒',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'业务操作流程',
                children:[
                  {
                    good:'（1）服务过程中均能按照规范操作流程执行',
                    bad:'工单录入及备注录入未符合录入准确性要求，且对工单的结果未及时跟踪',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）对尚未有明确流程规范的情况处理谨慎，未有业务风险或给客户带来不便',
                    bad:'给客户平台通知以外的保证',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                ]
              },
            ]
          },
          {
            id:3,
            title:'服务效率',
            subTitles:[
              {
                title:'倾听理解判断',
                children:[
                  {
                    good:'（1）能准确理解答疑手册内容，不会出现答非所问的情况',
                    bad:'答非所问（回答是正确的，但和客户的问题无关）及时纠正-10分/未及时纠正-30分',
                    grade:{
                      value:30,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）在客户不理解时，用较为通俗易懂的方式给客户解释',
                    bad:'',
                    grade:{
                      value:10,
                      ischecked:false
                    }
                  },
                ]
              },
              {
                title:'沟通',
                children:[
                  {
                    good:'（1）能化解客户的不满，有效安抚客户，态度诚恳，化解投诉',
                    bad:'客户通话中因各种原因表现出投诉倾向/不满/着急/情绪激动时，未主动道歉安抚',
                    grade:{
                      value:30,
                      ischecked:false
                    }
                  },
                  {
                    good:'（2）对于业务上无法实现的情况能合理向客户解释、委婉拒绝',
                    bad:'反问客户、质疑，以不恰当方式指出客户错误、拒绝客户',
                    grade:{
                      value:20,
                      ischecked:false
                    }
                  },
                ]
              },
            ]
          },
          {
            id:4,
            type:'reset',   // 标记清零项
            title:'清零项',
            content:{
              good: '电话中出现挂断客户电话/在电话中与客户发生争执/电话中有抱怨、辱骂、指责、讽刺、挑衅客户的情况',
              bad: '未解决客户问题，非特殊情况下，主动挂断客户电话',
              grade: {
                value:100,
                ischecked:false
              }
            },
          },
        ],
      }
    }
  },
  filters: {
    fltStAllLen(val){
      let l = 0
      val.forEach(item => {
        l += item.children.length
      })
      return l
    },
    fltClassByIndex(index){
      let s = 'gTd'
      switch(index){
        case 0:
          s += 'A'
          break
        case 1:
          s += 'B'
          break
        case 2:
          s += 'C'
          break
        case 3:
          s += 'D'
          break
        case 4:
          s += 'E'
          break
        case 5:
          s += 'F'
          break
      }
      return s
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.getUserInfo
    },
    kf() {
      return this.$store.getters.getKf
    },
    cuCurGroup(){
      return this.$store.getters.getUserInfo.userGroup
    },
    cuPower(){
      return this.$store.getters.getUserInfo.power
    }
  },
  watch:{
    'gradeTable.curContent'(ctt){
      if(ctt.length > 0){
        let total = 0
        ctt.forEach(item => {
          if(item.type === 'reset' && item.content.grade.ischecked){
            total += item.content.grade.value
          }else if(item.subTitles){
            item.subTitles.forEach(sItem => {
              sItem.children.forEach(ssItem => {
                if(ssItem.grade.ischecked){
                  total += ssItem.grade.value
                }
              })
            })
          }
        })
        this.gradeTable.total = total > 100 ? 0 : 100 - total
      }
    }
  },
  mounted() {
    this.kfs.options = this.kf
    //
    const curGroup = this.cuCurGroup
    if(curGroup !== '质检组'){
      const kfGoptions = this.kfGroup.options
      kfGoptions.forEach(item => {
        if(item.label === curGroup){
          this.kfGroup.value = item.value
        }
      })
    }
    //
    this.getTableData()
    this.getQue1()
    //

    // 评价
    if(curGroup === '质检组' || this.cuPower === 1){
      // 对数据进行深克隆
      this.gradeTable.curContent = JSON.parse(JSON.stringify(this.gradeTable.yw))
    }else{
      const {userGroupId} = this.$store.getters.getUserInfo
      this.kfGroup.value = userGroupId
      this.gradeTable.curContent = JSON.parse(JSON.stringify(this.gradeTable[this._gId2gEN(userGroupId)]))
    }
  },
  methods: {
    zjSearch(){
     this.getTableData()
    },
    zjReset(){
      this.problemType.value =''//问题类型
      this.fzleixing.value =''//分组
      this.kfs.value =''//客服
      this.callType.value=''//电话类型
      this.phone=''//电话
      this.sitution.value =''//处理情况
      this.callDur.st  =''
      this.callDur.et =''
      
    },
    handleChangeGroup(gid) {
      if(gid !== this.kfGroup.value){
        this.kfGroup.value = gid
        this.gradeTable.curContent = JSON.parse(JSON.stringify(this.gradeTable[this._gId2gEN(gid)]))
        this.handleCurrentChange(1)
      }
    },
    // 评分功能
    openGradeDialog(cId,grade){
      this.gradeTable.isGrade = grade === undefined ? true : false
      this.gradeTable.callId = cId
      this.getZJPF()
    },
    handleSubmitGrade(){
      this.postZJPF()
    },
    async getZJPF(){
      try{
        const {data} = await this.$get(this,{
          api:'ajaxapi/getPfxx.do',
          data: {
            ipccId: this.gradeTable.callId
          }
        })
        if(data.state === 0){
          this.gradeTable.curContent = this._ZJPFCurContentByData(data.content)
          this.gradeTable.total = data.content &&  data.content.zf ?  data.content.zf : 100
          this.gradeTable.textarea = data.content && data.content.bz ? data.content.bz : ''
          this.isVisible.grade = true
          return
        }
        this.$warn('系统接口ajaxapi/getPfxx.do响应异常')
      }catch(e){
        this.$warn('系统接口get ajaxapi/getPfxx.do报错')
        console.log('ajaxapi/getPfxx.do:', e.message)
      }
    },
    _ZJPFCurContentByData(data){
      const gid = this.kfGroup.value
      // const ctt = JSON.parse(JSON.stringify(this.gradeTable.curContent))
      const ctt = JSON.parse(JSON.stringify(this.gradeTable[this._gId2gEN(gid)]))
      if(data){
        ctt.forEach((item,idx) => {
          if(item.type === 'reset' && data['qlx']){
            ctt[idx].content.grade.ischecked = true
          }else if(item.subTitles){
            item.subTitles.forEach((sItem,sIdx) => {
              let pname = this._stitle2Pstr(sItem.title)
              if(data[pname]){
                const tmpa = data[pname].split(',')
                let i = 0
                sItem.children.forEach((ssItem,ssIdx) => {
                  if(ssIdx === (tmpa[i] - 1) && i < tmpa.length){
                    ctt[idx].subTitles[sIdx].children[ssIdx].grade.ischecked = true
                    i++
                  }
                })
              }
            })
          }
        })
        // return ctt
      }
      return ctt
    },
    async postZJPF(){
     
      const param = this._ZJPFPostparamsByCurContent()
      param['ipccId'] = this.gradeTable.callId
      param['zf'] = this.gradeTable.total
      param['bz'] = this.gradeTable.textarea
      param['kfid'] = this.userInfo.id
      try{
        const {data} = await this.$post(this,{
          api:'ajaxapi/zjpf.do',
          data: param
         
        })
        if(data.state === 0 && data.content){
          this.$message({
            message:'提交成功',
            type:'success'
          })
          this.getTableData()
          this.isVisible.grade = false
          return
        }
        this.$message.error('提交失败')
      }catch(e){
        this.$warn('系统接口post ajaxapi/zjpf.do报错')
      }
    },
    _ZJPFPostparamsByCurContent(){
      const ctt = Object.assign([],this.gradeTable.curContent)
      let param = {}
      ctt.forEach(item => {
        if(item.type === 'reset' && item.content.grade.ischecked){
          param['qlx'] = '1'
        }else if(item.subTitles){
          item.subTitles.forEach(sItem => {
            let pname = this._stitle2Pstr(sItem.title)
            let pstr = ''
            sItem.children.forEach((ssItem,ssIdx) => {
                if(ssItem.grade.ischecked){
                  pstr += (ssIdx + 1 + ',')
                }
            })
            param[pname] = pstr.slice(0,pstr.length - 1)  // 去掉最后的逗号
          })
        }
      })
      console.log('param:', param)
      return param
    },
    _stitle2Pstr(title){
      let pname
      if(title.includes('服务用语')){
        pname = 'fwyy'
      } else if (title.includes('服务耐心')) {
        pname = 'fwnx'
      } else if (title.includes('语音语速')) {
        pname = 'yyys'
      } else if (title.includes('业务指导')) {
        pname = 'ywzd'
      } else if (title.includes('服务规范')) {
        pname = 'fwgf'
      } else if (title.includes('业务操作')) {
        pname = 'ywcz'
      } else if (title.includes('倾听理解')) {
        pname = 'qtlj'
      } else if (title.includes('沟通')) {
        pname = 'gt'
      } else if (title.includes('系统操作')) {
        pname = 'xtcz'
      }else if (title.includes('适度营销')) {
        pname = 'sdyx'
      }
      return pname
    },
    _initGradeTable(){
      // this.gradeTable.curContent = Object.assign([],this.gradeTable[this._gId2gEN(this.kfGroup.value)])
      this.gradeTable.textarea = ''
      this.gradeTable.total = 100
    },
    handleCancelGrade(){
      this.isVisible.grade = false
    },
    _gId2gEN(gid){
      switch(gid){
        case 104:
          return 'yw'
        case 100:
          return 'dy'
        case 112:
          return 'hf'
      }
    },
    checkChange(val,ischecked){
      // 克隆数组防止引用混乱
      // let ctt = Object.assign([],this.gradeTable.curContent)
      let ctt = JSON.parse(JSON.stringify(this.gradeTable.curContent))

      // 将indexs中的数据全部过滤成整数
      let indexs = typeof val === 'string' ? val.split(','): [val]
      indexs.forEach((item,idx) => {
        indexs[idx] = Number.parseInt(item,10)
      })
      //
      ctt.forEach((item,idx) => {
        if(indexs[0] === idx){
          if(item.type === 'reset'){
            ctt[indexs[0]].content.grade.ischecked = ischecked
          }else{
            ctt[indexs[0]].subTitles[indexs[1]].children[indexs[2]].grade.ischecked = ischecked
          }
        }
      })
      this.gradeTable.curContent = ctt
    },
    //
    handleCurrentChange(val) {
      this.page = val
      this.getTableData(val)
    },
    async getTableData() {
      const dateDur = this.dateDur
      if(!dateDur || (dateDur.length && dateDur.every(item=>item === null))){
        this.$toast({
          message:'请填写日期'
        })
        return
      }
      let { data } = await this.$get(this, {
        api: 'ajaxapi/callinfolist.do', data: {
          // 新增参数
          cdepartment:this.fzleixing.value,
          pf:this.gradeState.value,
          //
         
          id: this.userInfo.id,
          adminid: this.kfs.value,
          starttime: this.dateDur && dateFormat(this.dateDur[0], 'YYYY-MM-DD'),
          endtime: this.dateDur && dateFormat(this.dateDur[1], 'YYYY-MM-DD'),
          // 添加手机号码筛选条件
          neirou:this.phone,
          // myd: this.myd.value,  // 暂不需要满意度
          ccallinaction: this.callType.value,
          yiji: this.problemType.value,
          state: this.sitution.value,
          sjc_s: this.callDur.st,
          sjc_e: this.callDur.et,
          UserName: this.userInfo.userName,
          UserGroupId: this.userInfo.userGroupId,
          duty: this.userInfo.duty || '',
          isAdmin: this.userInfo.isAdmin,
          page:this.page,
          pagesize: this.pageSize
        }
      })
      if (data.state === 0) {
        this.tableData = data.content.data;
        this.total = data.content.num;
      } else {
        this.$toast({
          message: data.message
        })
      }
    },
    async getQue1() {
      try {
        const { data } = await this.$get(this, {
          api: 'ajaxapi/loadProblemTypes1.do'
        })
        if (data.state === 0) {
          this.problemType.options = data.content
          return
        }
      } catch (e) {
        this.$warn('系统ajaxapi/loadProblemTypes1.do接口报错')
      }
    },
    dialog(index) {
      this.isVisible.remark = true
      this.remarkContent = this.tableData[index].callcontent
    },
  }
}
</script>

<style lang="scss" module>
.click{
  color:#20a0ff;
  cursor:pointer;
}
.noBorder{
  border:none;
}
.red{
  color:#FF4949;
}
</style>


<style lang="scss" scoped>
.zrjk__top {
  $btmBorderColor: #bac2cb;
  $btnDftBgColor: #ecf0f3;
  $btnDftColor: #bac2cb;
  $btnChgBgColor: #5394fc;
  $btnChgColor: #fff;
  padding: 20px 23px;
  padding-bottom:0;
  // border: 1px solid $btmBorderColor;
  // border-bottom: none;
  background: $btnChgColor;
  text-align: right;
  .el-button {
    padding: 11px 29px;
    color: $btnDftColor;
    background: $btnDftBgColor;
    border: none;
    transition: all .3s;
    &:hover {
      color: $btnChgColor;
      background: $btnChgBgColor;
    }
    &.active {
      color: $btnChgColor;
      background: $btnChgBgColor;
    }
  }
}
.row{
  padding:10px 20px;
}
.middle{
  background: #fff;
}

// gradeDialog
.gradeDialog{
  $bc:#dddfe6;
  table{
    width:100%;
    border-left:1px solid $bc;
    font-size:12px;
    line-height:18px;
    th,td{
      border-right:1px solid $bc;
      border-bottom:1px solid $bc;
    }
    &:first-child{
      border-top:1px solid $bc;
    }
  }
  .gTdA{
    width:3%;
    text-align:center;
  }
  .gTdB{
    position:relative;
    width:4%;
    text-align:center;
    &.reset{
      border-right:none;
      span{
        position:absolute;
        width:50px;
        text-align:center;
        top:50%;
        left:130%;
        transform:translateY(-50%);
      }
    }
  }
  .gTdC{
    width:10%;
    text-align:center;
  }
  .gTdD{
    width:35%;
  }
  .gTdE{
    width:35%;
  }
  .gTdF{
    width:10%;
    text-align:center;
    .gv{
      margin-right:5px;
    }
  }
  .total{
    $fc:16px;
    height:30px;
    line-height:30px;
    font-size:$fc;
    border:1px solid $bc;
    border-top:none;
    &::after{
      content:"";
      clear:both;
    }
    .gTdABCDE{
      float:left;
      width:calc(90% - 4px);
      text-align:center;
      input{
        width:34px;
        font-size:$fc;
      }
      .unit{
        font-size:12px;
      }
    }
    .gTdF{
      float:left;
      height:100%;
      border-left:1px solid $bc;
    }
  }
  .textarea{
    margin-top:20px;
  }
}
</style>

<style lang="scss">
.kxz-zjList__gradeDialog{
  .el-dialog{
    width:60%;
  }
  .el-dialog__header{
    padding:20px 20px 0 0;
  }
  .el-dialog__body{
    padding-top:10px;
  }
  .is-disabled.is-checked{
    .el-checkbox__inner{
      background-color:#20a0ff;
    }
  }
  // .noBorder textarea{
  //   border:none;
  // }
}
</style>
